<template>
  <div class="app-container">
    <dv-full-screen-container class="dv-container">
      <div class="dvleft">
        <dv-border-box-2>
          <div class="demo1">
            <p>平台总览</p>
            <ul>
              <li v-for="(item, index) in overviewList" :key="index">
                <p>{{ item.num }}</p>
                <p>{{ item.name }}</p>
              </li>
            </ul>
          </div>

        </dv-border-box-2>
        <dv-border-box-11 title="质量分析驾驶舱" class="position:absolute">
          <p style="position:relative;top: 40px;left: 20px;color: #11a983"><i class="el-icon-arrow-right"
              titIcon></i>质量算法任务</p>
          <div id="lineChar" class="charC"></div>
        </dv-border-box-11>
        <dv-border-box-1 class="position:absolute;margin:0 auto">
          <p class="title"><i class="el-icon-arrow-right titIcon"></i>质量近期任务</p>
          <dv-scroll-board :config="config" style="width:450px;height:250px;margin-left: 20px;" />
        </dv-border-box-1>
      </div>
      <div class="dvright">
        <div class="up">
          <p style="color:#fff;margin:0;margin-left:100px">工艺优化驾驶舱</p>
          <dv-decoration-5 dur="2" style="width:300px;height:40px;" />
          <div class="up-content">
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>算法调用统计</p>
              <div id="pie1Char" class="charC"></div>
            </dv-border-box-10>
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>算法平均运行时长</p>
              <div id="zhuChar1" class="charC"></div>
            </dv-border-box-10>
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>工艺算法任务</p>
              <div id="lineChar1" class="charC"></div>
            </dv-border-box-10>
          </div>
        </div>
        <!-- <div class="down">
          <p style="color:#fff;margin:0;margin-left:100px">设备健康驾驶舱</p>
          <dv-decoration-5 dur="2" style="width:300px;height:40px;" />
          <div style="display:flex;justify-content:space-between">
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>质量近期任务</p>
              <div id="pie1Char2" class="charC"></div>
            </dv-border-box-10>
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>质量近期任务</p>
              <div id="zhuChar2" class="charC"></div>
            </dv-border-box-10>
            <dv-border-box-10>
              <p class="title"><i class="el-icon-arrow-right titIcon"></i>质量近期任务</p>
              <div id="lineChar2" class="charC"></div>
            </dv-border-box-10>
          </div>
        </div> -->
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script>
import * as Echarts from "echarts";
import "echarts-better";
export default {
  name: 'Main',
  data() {
    return {
      overviewList: [
        { num: 12, name: '算法数量' },
        { num: 12, name: '质量算法总任务' },
        { num: 12, name: '质量算法总任务' },
        { num: 12, name: '质量算法总任务' },
      ],
      option: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      myChart: '',
      myChart7: '',
      myChart2: '',
      myChart3: '',
      myChart4: '',
      myChart5: '',
      myChart6: '',
      config: {
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }

    }
  },
  created() {
    this.getInitData()
  },
  mounted() {
  },
  updated() {

  },
  methods: {
    getInitData() {
      setTimeout(() => {
        this.showCharts()
      }, 500)


    },
    showCharts() {
      this.myChart.setOption(this.option);
      this.myChart2.setOption(this.option2);
      this.myChart3.setOption(this.option3);
      this.myChart4.setOption(this.option4);
      this.myChart5.setOption(this.option5);
      this.myChart6.setOption(this.option6);
      this.myChart7.setOption(this.option7);
      this.myChart = Echarts.init(document.getElementById("lineChar"));
      this.myChart2 = Echarts.init(document.getElementById("pie1Char1"));
      this.myChart3 = Echarts.init(document.getElementById("zhuChar1"));
      this.myChart4 = Echarts.init(document.getElementById("lineChar1"));
      this.myChart5 = Echarts.init(document.getElementById("pie1Char2"));
      this.myChart6 = Echarts.init(document.getElementById("zhuChar2"));
      this.myChart7 = Echarts.init(document.getElementById("lineChar2"));
      window.addEventListener("resize", () => {
        this.myChart.resize();
        this.myChart2.resize();
        this.myChart3.resize();
        this.myChart4.resize();
        this.myChart5.resize();
        this.myChart6.resize();
        this.myChart7.resize();
      });
    },
  }
}
</script>

<style scoped lang="scss">
ul>li {
  list-style: none;
}

.app-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.title {
  position: relative;
  top: 0px;
  left: 20px;
  color: #11a983
}

.titIcon {
  color: #42ce7c;
  font-weight: bold;
}



.dv-container {
  width: 100%;
  display: flex;
  background-image: url('../../../assets/images/bg.png');
  background-size: cover;
}

#dv-full-screen-container {
  position: relative !important;
  min-height: 200px !important;
}


.dvleft {
  width: 35%;
  margin: 10px 5px 0 10px;
  display: flex;
  padding: 0 20px;
  flex-direction: column;
  // align-items: center;

  .dv-border-box-2 {
    margin-bottom: 20px;
    height: 50% !important;
  }

  .dv-border-box-11 {
    margin-bottom: 20px;
  }

  .dv-border-box-1 {
    box-sizing: border-box;
  }

  .demo1 {
    padding: 10px;
    box-sizing: border-box;

    p {
      color: #11a983;
    }

    ul {
      display: flex;
      padding-left: 0;
      justify-content: space-between;
    }

    li>p {
      color: #fff;
      text-align: center;
      font-size: 14px;
    }
  }
}

.dvright {
  width: 65%;
  margin: 10px 10px 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .up {
    width: 100%;
    display: flex;
    flex-direction: column;

    .up-content {
      padding-right: 6%;
      display: flex;
      justify-content: space-between;
    }

    .dv-border-box-10 {
      // width: 200px;
      // height: 200px;

      .charC {
        width: 100%;
        height: 85%;
        margin-left: 10px
      }
    }
  }
}
</style>
